import React ,{useEffect,useState}from 'react';
import { useLocation } from 'umi';
import { Tabs ,Row ,Col} from 'antd';
import stylea from './index.less';
import { viewMaintenance } from '@/service/carMessage/maintenance';
import { car,maintenance ,cost, workOrderType, operationType, maintenanceType, overInsurance, carStatus} from '../enum';




const arr = [car,maintenance,cost]

export default function () {

  const loaction:any = useLocation()

  const [data,setData] = useState<any>({})

  useEffect(()=>{
    if(loaction?.query?.id){
      viewMaintenance({id:loaction?.query?.id}).then(res=>{
        if(res?.success){
          setData(res.data)
        }
      })
    }

  },[])

  const renderItem = (Data:any,item:any)=>{
    if(item === 'operationType'){
      return operationType[Data[item]]
    }
    if(item === 'maintenanceType'){
      return maintenanceType[Data[item]]
    }
    if(item === 'overInsurance'){
      return overInsurance[Data[item]]
    }
    if(item === 'carStatus'){
      return carStatus[Data[item]]
    }
    return Data[item]
  }



  return (
    <div className={stylea.page}>
      <Tabs
        type="card"
        items={['车辆详情','维保详情','费用详情'].map((it, i) => ({
            label: it,
            key: it,
            children: <div>
               <div style={{fontSize:'18px',marginTop:'20px',marginLeft:'15px'}}>工单类型：{workOrderType[data.workOrderType]}</div>
              <Row style={{marginTop:'20px'}}>

                {
                   Object.keys(arr[i]).map(ite=>(
                      <Col style={{marginBottom:'25px',marginLeft:'50px'}} span={7}>
                        <Row style={{lineHeight:'35px'}}>
                          <Col span={7} style={{fontSize:'16px',textAlign:'right'}} >{ite} {ite.replace(/\s*/g,'')?':':''}</Col>
                          <Col span={16} style={{fontSize:'14px',color:'#404d4ecc',marginLeft:'15px'}}>
                            {ite.replace(/\s*/g,'')?<input style={{width:'100%'}} disabled value={renderItem(data,arr[i][ite])}/>:<></>}
                          </Col>
                        </Row>
                      </Col>
                    ))
                }
              </Row></div>,
          }))}
      />
    </div>
  );
}
